<template>
    <div class="show-code-box">
        <div class="show-connect">
            <slot></slot>
        </div>
        <div class="show-code-btn">
            <el-button text @click="visible = !visible"> &lt; &lt; 显示 / 隐藏代码 &gt; &gt; </el-button>
        </div>
        <div v-show="visible">
            <highlightjs language="vue" :code="code"/>
        </div>
    </div>
</template>
<style>
.show-code-box{
    margin-top: 16px; 
    margin-bottom: 36px;
    border:1px #eee solid;
}
.show-connect{
    padding: 16px 24px;
}
.show-code-btn{
    text-align: center;
    border-top: 1px #eee solid;
    margin-top: 16px;
    background-color: #f8f8f8;
    
}
</style>
<script setup>
   import {ref} from 'vue'
   const props = defineProps({
    code: {
        type: String, 	
        required: true, 	
        default: '' 
    }
   })
   const visible = ref(false)
</script>